<template>
	<view class="container">
		<view class="mt_8 bc_fff plr_16">
			<view class="cell fx aic jcb ptb_12">
				<input maxlength="11" v-model="phone" type="number" placeholder="填写手机号" />
			</view>
			<view class="cell fx aic jcb ptb_12">
				<input v-model="captcha" type="number" placeholder="填写验证码" />
				<text class="fc_primary" @tap="handleGetCode">{{verifyTips}}</text>
			</view>
		</view>
		<view class="mt_64 plr_16">
			<button class="custom_btn primary lh_40 w100 fz_14 br_40" :style="{background: phone?'#FF8000':'#CCCCCA'} " @click="handleConfirm">确认更换</button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-code :seconds="seconds" ref="uCode" @change="codeChange" unique-key="change-number"
			:keepRunning="true"></u-code>
	</view>
</template>

<script>
	import verifyCode from "@/mixins/verify_code.js";
	import api from '@/service/config/api.js'
	export default {
		mixins: [verifyCode],
		data() {
			return {
				phone: '',
				captcha: ''
			}
		},
		methods: {
			handleConfirm() {
				this.$utils.loading()
				api.post("/user/api/customerSet/validatedCode", {
					mobileCode: this.captcha,
					phone: this.phone
				}, {
					noHideLoading: true
				}).then((res) => {
					if (res.data) {
						api.post('/user/api/customerSet/modifyPhone', {
							phone: this.phone
						}).then(res => {
							let userInfo = this.$storage.getItem('basicUnserInfo')
							userInfo.phone = this.phone
							this.$storage.setItem('basicUnserInfo', userInfo)
							this.$utils.showToast('更换成功！', 1500, 1)
						})
					} else {
						uni.hideLoading()
						this.$utils.showToast('验证码有误')
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getVerify() {
				api.get("/user/api/auth/sendLoginSms/" + this.phone).then((res) => {
					this.showSend();
				});
			},
			handleGetCode() {
				if (!this.phone) return this.$utils.showToast("请填写手机号码");
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.phone))
					return this.$utils.showToast("请输入正确的手机号码");
				this.$utils.loading();
				api.post('/user/api/customerSet/phoneRegister', {
					phone: this.phone,
				}).then(res => {
					if(res.data) {
						return this.$utils.showToast('此手机号已被注册')
					} 
					this.getCode();
				})
			},
		},
	}
</script>

<style lang="scss">
	.container {
		.cell+.cell {
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
		}
	}
</style>